<template>
  <div class="home">
    <router-link to="/home"
                 class="home-header"
                 tag="div">
      <div class="img-wrap"></div>
    </router-link>
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh"
                      :disabled="disabled"
                      :head-height="headHeight">
      <component-scroll ref="scroll"
                        class="scroll"
                        @scrollend="handleScrollEnd"
                        :listenScroll="listenScroll"
                        :data="recommendList">
        <div class="content">
          <home-swiper :list="swiperList"
                       @loadImg="loadDataed"></home-swiper>
          <component-loading v-show="!recommendList.length > 0"></component-loading>
          <home-recommend :list="recommendList"
                          @show="handlseShow"></home-recommend>
          <home-load-more @loadMore="handleLoadMore"
                          :load="load"
                          :finish="finish"
                          v-show="recommendList.length"></home-load-more>
          <home-cooperation :imgUrl="footerInfo.partner_img"
                            @loadImg="loadDataed"
                            v-if="recommendList.length"></home-cooperation>
          <component-footer :info="footerInfo"
                            @loadImg="loadDataed"
                            v-show="recommendList.length > 0"></component-footer>
        </div>
      </component-scroll>
    </van-pull-refresh>
    <div class="shade"
         v-show="isShow"
         @click.stop="handleHide">
      <div class="iconfont guide">&#xe679;</div>
    </div>
    <component-tab></component-tab>
  </div>
</template>

<script>
import ComponentTab from 'common/tabBar'
import HomeSwiper from './components/swiper'
import ComponentScroll from '@/components/scroll'
import HomeRecommend from './components/recommend'
import HomeLoadMore from './components/loadMore'
import HomeCooperation from './components/cooperation'
import ComponentFooter from 'common/footer'
import ComponentLoading from 'common/loading'
import commonWx from '@/assets/js/wx'
import { mapMutations } from 'vuex'
import {
  Toast
} from 'vant'
export default {
  name: 'Home',
  components: {
    ComponentTab,
    HomeSwiper,
    ComponentScroll,
    HomeRecommend,
    HomeLoadMore,
    HomeCooperation,
    ComponentFooter,
    ComponentLoading
  },
  data () {
    return {
      isShow: false, // 阴影
      isLoading: false,
      swiperList: [], // 轮播
      footerInfo: {}, // footer 数据
      scrollHeight: 0, // 滚动的高度
      page: 1, // 分页page
      load: true, // 加载中
      finish: true, // 没有更多数据
      recommendList: [], // 推荐数据
      timer: null, // 清理定时器
      disabled: false, // 是否可以下拉刷新
      total: 0, // 数据总数
      headHeight: 60, // 下拉刷新的高度
      lat: 0, // 纬度
      lng: 0 // 经度
    }
  },
  created () {
    const path = this.$route.fullPath
    this.getSwiper()
    this.listenScroll = true
    this.$localStorage.set('authUrl', path)
    this._initLocation()
  },
  methods: {
    onRefresh () {
      const msg = '刷新成功'
      this.page = 1
      this.recommendList = []
      this.getSwiper()
      this.getRecommendInfo(this.lat, this.lng)
      setTimeout(() => {
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
      }, 500)
    },
    // 获取轮播
    getSwiper () {
      this.$api.home.getSwiper()
        .then(this.getSwiperSucc)
        .catch((e) => {
          console.log(e)
        })
    },
    getSwiperSucc (res) {
      res = res.data
      const LOGIN_CODE = this.$api.LOGIN_CODE
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.swiperList = data.slide
        this.isLoading = false
        this.footerInfo = data.footInfo
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    // 获取推荐
    getRecommendInfo (lat, lng) {
      this.lat = lat
      this.lng = lng
      this.load = true
      const page = this.page
      this.$api.home.getRecommend({ page, lat: this.lat, lng: this.lng })
        .then(this.getRecommendInfoSucc)
    },
    getRecommendInfoSucc (res) {
      res = res.data
      const LOGIN_CODE = this.$api.LOGIN_CODE
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        const recommendList = data.seller
        this.recommendList = this.recommendList.concat(recommendList)
        this.total = data.total
        this.load = false
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    getCommonFooter (info) {
      this.changeFooterInfo(info)
    },
    ...mapMutations({
      changeFooterInfo: 'changeFooterInfo'
    }),
    // 计算滚动
    loadDataed () {
      if (!this.checkLoaded) {
        this.$refs.scroll.refresh()
        this.checkLoaded = true
      }
    },
    // 滚动结束
    handleScrollEnd (pos) {
      this.scrollHeight = -pos.y
    },
    // page
    handleLoadMore () {
      this.page++
    },
    // 定位
    _initLocation () {
      commonWx.getLocation(this.getRecommendInfo)
    },
    handlseShow (flag) {
      this.isShow = flag
    },
    handleHide () {
      this.isShow = false
    }
  },
  watch: {
    scrollHeight (newY) {
      this.disabled = newY > 0
    },
    page (page) {
      setTimeout(() => {
        this.getRecommendInfo(this.lat, this.lng)
        this.$refs.scroll.finishPullUp()
        this.$refs.scroll.refresh()
      }, 200)
    },
    recommendList (list) {
      const total = this.total
      this.finish = !(list.length >= total)
    }
  }
}

</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.home >>> .van-pull-refresh__track
  width 100%
  height 100vh

.home
  touch-action none
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  overflow hidden

.home-header
  position absolute
  top 0
  left 0
  z-index 2
  width 100%
  height 88px
  background rgba(255, 255, 255, 1)
  box-shadow 0px 5px 12px 0px rgba(5, 5, 5, 0.12)
  display flex
  justify-content center
  align-items center

  .img-wrap
    width 248px
    height 28px
    bgckImg('~@/assets/images/logo_black.png', center, center)

.scroll
  top 88px
  box-sizing border-box
  bottom 110px

.shade
  position fixed
  z-index 30
  top 0
  left 0
  bottom 0
  right 0
  background rgba(0, 0, 0, 0.4)

.guide
  position absolute
  right 20px
  top 0
  font-size 80px
  color #fff
</style>
